<template>
	<div class="progress-message">
		<slot />
		<!-- #ifndef  MP-WEIXIN -->
		<div v-if="props.messageItem.status === 'unSend' && props.messageItem.progress < 1" class="progress-container">
			<progress activeColor="#006EFF" class="progress-common" :percent="Math.round(progress*100)" />
		</div>
		<!-- #endif -->
	</div>
</template>

<script lang="ts" setup>
	import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
	import { withDefaults, computed, watch } from 'vue';
	import type { IImageMessageContent } from '@/types/interface';
	const props = withDefaults(
		defineProps<{
			content : IImageMessageContent;
			messageItem : IMessageModel;
		}>(),
		{
			content: () => ({}),
			messageItem: () => ({} as IMessageModel),
		},
	);
	const progress = computed(() => {
		return props.messageItem.progress;
	})
</script>

<style lang="scss" scoped>
	$primary-progress-color: #006eff;
	$primary-progress-bg-color: #fff;

	.progress-message {
		overflow: hidden;

		.progress-container {
			position: absolute;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding: 0 15%;
			left: 0;
			top: 0;
			background: rgba(#000, 0.5);
			display: flex;
			align-items: center;

			.progress-common {
				appearance: none;
				width: 100%;
				height: 0.5rem;
			}

			.progress {
				@extend .progress-common;

				color: $primary-progress-color;
				border-radius: 0.25rem;
				background: $primary-progress-bg-color;

				&::-webkit-progress-value {
					background-color: $primary-progress-color;
					border-radius: 0.25rem;
				}

				&::-webkit-progress-bar {
					border-radius: 0.25rem;
					background: $primary-progress-bg-color;
				}

				&::-moz-progress-bar {
					color: $primary-progress-color;
					background: $primary-progress-color;
					border-radius: 0.25rem;
				}
			}
		}
	}
</style>